<template>
	<view class="hotel_list">
		<!-- #ifdef APP-PLUS -->
		<top-set backgroundColor="#3595f9"></top-set>
		<!-- #endif -->

		<view class="head_box">

			<view class="head">
				<view class="serach">
					<view class="adress" @tap="toback">
						<view class="back_img">
							<image src="/static/icon/white-back.png" mode=""></image>
						</view>


					</view>
					<view class="search_input">
						<image class="s_img" src="/static/icon/search.png" mode=""></image>
						<input class="s_input" placeholder="请输入酒店名称" type="text" v-model="key" confirm-type="search" @confirm="toSearch" />
						<view class="close_box" @tap="closeKey" v-if="key">
							<image class="i_close" src="/static/icon/s-cuo.png" mode=""></image>
						</view>
					</view>
					<view class="order" @tap="openOrderDetil('1')">
						<view class="icon">
							<image class="img" src="/static/personal-center/confirmed.png" mode=""></image>
							<view v-if="dds != 0" class="message">
								{{dds}}
							</view>
						</view>
					</view>
				</view>

				<view class="list">
					<view class="item">
						<!-- address -->
						<view class="box" @tap="showDistance('address')">
							<view class="title" :class="[windshield != 'address'?'':'title_active']" >全西安</view>
							<view class="icon">
								<image class="img" 
								:src="windshield != 'address'?'/static/icon/down-999999.png':'/static/icon/blue-up.png'" mode ="">
								</image>
							</view>
						</view>
					</view>
					<view class="item">
						<view class="box" @tap="showDistance('time')">
							<view class="title" :class="[windshield != 'time'?'':'title_active']" >{{time_active=="up"?"时间顺序":"时间倒序"}}</view>
							<view class="icon">
								<image class="img" 
								:src="windshield != 'time'?'/static/icon/down-999999.png':'/static/icon/blue-up.png'" mode ="">
								</image>
							</view>
						</view>
					</view>
					<view class="item" @tap="showDistance('distance')">
						<view class="box">
							<view class="title" :class="[windshield != 'distance'?'':'title_active']">距我{{distance_active}}km</view>
							<view class="icon">
								<image class="img " 
								:src="windshield != 'distance'?'/static/icon/down-999999.png':'/static/icon/blue-up.png'" mode ="">
								</image>

							</view>
						</view>
					</view>

				</view>

			</view>
			<view class="windshield" v-if="windshield" @tap="closeWindshield">
				<view class="adress" v-if="windshield == 'address'">
						<view class="adress_left">
							<scroll-view  class="scroll-Y" scroll-y="true">
								<view class="adress_left_item">
									全西安
								</view>
								<view class="adress_left_item adress_left_active">
									未央区
								</view>
								<view class="adress_left_item " v-for="(v,i) in 10" :key="i">
									未央区{{i}}
								</view>
							</scroll-view>
						</view>
						<view class="adress_right">
							<scroll-view  class="scroll-Y" scroll-y="true">
								<view class="adress_right_item" v-for="(v,i) in 10" :key="i">
									全未央区{{i}}
								</view>
								
							</scroll-view>
						</view>
				</view>
				<view class="distance" v-else-if="windshield == 'time'">
					<view class="distance_list">
						<view class="distance_item" :class="time_active == 'up'?'distance_active':''" @tap.stop="time_active = 'up'">时间顺序</view>
						<view class="distance_item" :class="time_active == 'down'?'distance_active':''" @tap.stop="time_active = 'down'">时间倒序</view>
						
					</view>
				</view>
				<view class="distance" v-else-if="windshield == 'distance'">
					<view class="distance_list">
						<view class="distance_item" :class="distance_active == 1?'distance_active':''" @tap.stop="distance_active = 1">据我1km</view>
						<view class="distance_item" :class="distance_active == 5?'distance_active':''" @tap.stop="distance_active = 5">据我5km</view>
						<view class="distance_item" :class="distance_active == 10?'distance_active':''" @tap.stop="distance_active = 10">据我10km</view>
					</view>
				</view>
			</view>

		</view>

		<view class="content">
			 <scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y"  @scrolltolower="lower">
				 <view class="content_list">
					 <view class="content_item">
						<view class="item_img">
							<image src="/static/bg/room.png" mode=""></image>
						</view>
						<view class="item_text">
							<view class="text1">帝豪万庭酒店</view>
							<view class="text2">完成200单</view>
							<view class="text3">
								<view class="text3_left1"><image src="/static/icon/adress.png" mode=""></image></view>
								<view class="text3_left2">
									雁塔区雁塔南路国美什字
								</view>
								
								</view>
							<view class="text4">据您约1.0km</view>
						</view>
						<view class="item_btn">抢单</view>
					 </view>
				 </view>
				
				
			 </scroll-view>
		</view>
	</view>
</template>

<script>
	let serachAjax;
	export default {

		data() {
			return {
				key: '', 
				windshield: '', //distance 距离  tiem 时间 adress 地址
				distance_active: 1,//距离选项
				time_active:'up',//时间选项
				scrollTop:0,//滚动条当前位置
			}
		},
		methods: {
			//返回上一页
			toback() {
				uni.navigateBack({
					delta: 1,
					"animationType": this.GLOBAL.backAnimation,
					"animationDuration": this.GLOBAL.animationTime
				});
			},
			//搜索
			toSearch() {
				console.log("搜索");
			},
			//删除输入文字
			closeKey() {
				this.key = '';
			},
			//关闭弹出层
			closeWindshield() {
				this.windshield = '';
			},
			/**
			 * 显示 蒙层
			 */
			showDistance(val) {
				if (this.windshield == val) {
					this.windshield = '';
				} else {
					this.windshield = val;
				}

			},
			/**
			 * 滚动划到底部
			 */
			lower(e){
				console.log('滑到底部',e);
			}
		},
		mounted() {

		},
		computed: {

			dds() {
				return this.$store.state.cleaner.dds;
			}

		},

	}
</script>

<style lang="scss" scoped>
	$head:var(--status-bar-height);

	.title_active {
		color: #3595f9 !important;
	}

	.head_box {
		width: 100%;
		height: 168upx;
		position: relative;

		.head {
			position: fixed;
			/* #ifdef APP-PLUS */
			top: $head;
			/* #endif */
			/* #ifdef MP-WEIXIN */
			top: 0;
			/* #endif */
			z-index: 5;

			left: 0;
			width: 100%;
			height: 168upx;

			.serach {
				width: 100%;
				height: 88upx;

				background: #3595f9;
				box-sizing: border-box;

				.adress {

					float: left;
					box-sizing: border-box;
					margin: 19upx 24upx;

					.back_img {

						image {
							width: 32upx;
							height: 32upx;
						}
					}

					.title {
						float: left;
						font-size: 26upx;
						line-height: 1;
						color: #FFFFFF;
					}

					.icon {
						width: 16upx;
						height: 100%;
						float: left;

						.img {
							margin-left: 7upx;
							margin-top: 7upx;
							float: left;
							width: 16upx;
							height: 16upx;
						}
					}


				}

				.search_input {
					float: left;
					margin-top: 15upx;
					position: relative;
					width: 565upx;
					height: 60upx;
					border-radius: 60upx;
					background: #FFF;

					.s_img {
						position: absolute;
						top: 18upx;
						left: 32upx;
						width: 25upx;
						height: 25upx;
					}

					.s_input {
						position: absolute;
						left: 71upx;
						height: 60upx;
						width: 420upx;
						line-height: 60upx;
						font-size: 24upx;
						color: #999999;
					}

					.close_box {
						position: absolute;
						top: 0;
						right: 0;
						width: 86upx;
						height: 100%;

						.i_close {
							position: absolute;
							width: 29upx;
							height: 29upx;
							top: 15upx;
							right: 30upx;
						}
					}
				}

				.order {
					float: right;
					width: 98upx;
					height: 100%;
					padding: 26upx 23upx 26upx 40upx;
					box-sizing: border-box;

					.icon {
						width: 36upx;
						height: 36upx;
						position: relative;

						.img {
							position: absolute;
							float: left;
							width: 36upx;
							height: 36upx;
						}

						.message {
							position: absolute;
							top: -10upx;
							right: -10upx;
							width: 26upx;
							height: 26upx;
							text-align: center;
							line-height: 26upx;
							font-size: 18upx;
							background: #f93735;
							color: #FFFFFF;
							border-radius: 50%;
						}
					}
				}
			}

			.list {
				height: 80upx;
				width: 100%;
				background: #FFFFFF;
				border-bottom: 1upx solid #e5e5e5;

				.item {
					float: left;
					height: 100%;
					width: 33.33333333333%;
					display: flex;
					align-items: center;
					justify-content: center;

					.box {
						height: 24upx;
						width: auto;

						.title {
							font-size: 24upx;
							color: #999999;
							float: left;
						}

						.icon {
							float: left;
							width: 16upx;
							height: 16upx;
							margin: 8upx;

							image {
								width: 100%;
								height: 100%;
								float: left;
							}
						}
					}
				}
			}

		}

		.windshield {
			width: 100%;
			position: absolute;
			left: 0;
			top: 168upx;
			z-index: 2;
			/* #ifdef APP-PLUS */
			height: calc(100vh - 168upx - var(--status-bar-height));
			/* #endif */
			/* #ifndef APP-PLUS */
			height: calc(100vh - 168upx);
			/* #endif */

			background-color: rgba(0, 0, 0, 0.3);
			.adress{
				width: 100%;
				background: #FFFFFF;
				height: 700upx;
				.adress_left{
					width: 38.2%;
					height: 100%;
					float: left;
					.scroll-Y{
						width: 100%;
						height: 100%;
						.adress_left_item{
							height: 100upx;
							width: 100%;
							text-align: center;
							font-size: 28upx;
							line-height: 100upx;
							color: #333333;
						}
						.adress_left_active{
							background: #f0f0f0;
							color: #3595f9;
						}
					}
				}
				.adress_right{
					width: 61.8%;
					height: 100%;
					background: #f8f8f8;
					float: left;
					.scroll-Y{
						width: 100%;
						height: 100%;
						.adress_right_item{
							height: 100upx;
							width: 100%;
							text-align: center;
							font-size: 28upx;
							line-height: 100upx;
							color: #999999;
						}
					}
				}
			}
			.distance {
				width: 100%;
				background: #FFFFFF;

				.distance_list {
					.distance_item {
						text-indent: 25upx;
						height: 100upx;
						width: 100%;
						line-height: 100upx;
						font-size: 28upx;
						color: #333333;
					}

					.distance_active {
						background: #F0F0F0;
						color: #3595f9;
					}
				}
			}
		}
	}

	.content {
		width: 100%;
		/* #ifdef APP-PLUS */
		height: calc(100vh - 168upx - var(--status-bar-height));
		/* #endif */
		/* #ifndef APP-PLUS */
		height: calc(100vh - 168upx);
		/* #endif */
		background: #F8F8F8;
		.scroll-Y{
			width: 100%;
			height: 100%;
			.content_list{
				padding-top: 21upx;

				.content_item{
					width: calc(100% - 48upx);
					margin: 0 auto;
					margin-bottom: 21upx;
					height: 260upx;
					background: #FFFFFF;
					border-radius: 8upx;
					position: relative;
					overflow: hidden;
					.item_img{
						float: left;
						width: 173upx;
						height: 260upx;
						background-color: #e5e5e5;
						image{
							float: left;
							width: 100%;
							height: 100%;
						}
					}
					.item_text{
						float: left;
						width: 300upx;
						margin-top: 40upx;
						margin-left: 34upx;
						.text1{
							font-size: 32upx;
							color: #333333;
							line-height: 1;
						}
						.text2{
							margin-top: 25upx;
							color: #999999;
							font-size: 24upx;
							line-height: 1;
						}
						.text3{
							margin-top: 29upx;
							height: 24upx;
							font-size: 24upx;
							color: #999999;
								
							.text3_left1{
								float: left;
								image{
									float: left;
									width: 24upx;
									height: 24upx;
								}
							}
							
							.text3_left2{
								float: left;
								margin-left: 11upx;
								line-height: 1;
							}
							
						}
						.text4{
							margin-top:28upx;
							font-size: 24upx;
							line-height: 1;
							color: #999999;
						}
					}
					.item_btn{
						position: absolute;
						top: 65upx;
						right: 33upx;
						width: 130upx;
						height: 130upx;
						text-align: center;
						line-height: 110upx;
						color: #FFFFFF;
						font-size: 32upx;
						box-sizing: border-box;
						border-radius: 50%;
						// border: 10upx solid #daecfe;
						border: 10upx solid #f8f8f8;
						// background-color:#3595f9; 
						background-color:#e5e5e5;
					}
					.item_btn_active{
						border: 10upx solid #daecfe !important;
						background-color:#3595f9 !important; 
					}
				}
			}
			
		}
		
	}
</style>
